<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="js/echarts.min.js"></script>
       <script type="text/javascript" src="js/china.js"></script>
	   <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title : {
        text: '中国地图',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
		formatter: "{b}:{c}"
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    visualMap: {
        min: 0,
        max: 210,
        left: 'left',
        top: 'bottom',
        text:['面积','单位：万平方公里'],           
        calculable : true
    },
    toolbox: {
        show: true,
        orient : 'vertical',
        left: 'right',
        top: 'center',
        feature : {
            mark : {show: true},
            restore : {show: true}
        }
    },
    series : [
        {
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value:1.68},
                {name: '天津',value: 1.13},
                {name: '上海',value: 0.63},
                {name: '重庆',value: 8.3},
                {name: '河北',value:19},
                {name: '河南',value: 16.7},
                {name: '云南',value: 39.4},
                {name: '辽宁',value: 14.57},
                {name: '黑龙江',value:47.3},
                {name: '湖南',value: 21.18},
                {name: '安徽',value:13.96},
                {name: '山东',value: 15.7},
                {name: '新疆',value:166.49},
                {name: '江苏',value:10.26},
                {name: '浙江',value:10.18},
                {name: '江西',value: 16.69},
                {name: '湖北',value: 18.58},
                {name: '广西',value: 23.63},
                {name: '甘肃',value: 45.5},
                {name: '山西',value: 15.6},
                {name: '内蒙古',value:118.3},
                {name: '陕西',value:20.58},
                {name: '吉林',value: 18.74},
                {name: '福建',value: 12.14},
                {name: '贵州',value:17.62},
                {name: '广东',value: 17.98},
                {name: '青海',value: 72},
                {name: '西藏',value:122.84},
                {name: '四川',value: 48.5},
                {name: '宁夏',value: 6.64},
                {name: '海南',value: 3.39},
                {name: '台湾',value:3.62},
                {name: '香港',value: 0.10},
                {name: '澳门',value: 0.02},
                {name: '南海诸岛',value: 210}
            ]
        }
    ]
};
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
		myChart.on('click', function (params) {
			window.open('https://baike.baidu.com/item/' + encodeURIComponent(params.name));
		});
       </script>
   </body>
</html>